import Link from "next/link";
import React from "react";

export default function Posts(props: any) {
  const { posts } = props;
  if (!posts) {
    return <p>加载中。。。</p>;
  }

  return (
    <>
      <ul>
        {posts.map((item: any) => (
          <li key={item.id}>
            <Link href={{ pathname: "/posts/[pid]", query: { pid: item.id } }}>
              {item.title}
            </Link>
            <br />
          </li>
        ))}
      </ul>
    </>
  );
}

export async function getServerSideProps() {
  const list = await fetch("https://jsonplaceholder.typicode.com/posts");
  const data = await list.json();
  return {
    props: {
      posts: data,
    },
  };
}
